<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		  div{
			  			  width: 50%;
			  			  height: 200px;
			  			  /* 边框复合属性：属性值可以作为属性使用 */
			  			  border: 1px solid red;
			  			  /* 效果：1像素实线红色边框
			  			     作用：①.展示效果 ②确定元素是否选中【验证】
			  			   */
			  			  /* 边框宽度属性：数值px */
			  			  border-width:10px ;
			  			  /* 边框方向属性：数值px */
			  			  border-top-width: 10px;
			  			  border-bottom-width: 10px;
			  			  border-left-width: 5px;
			  			  border-right-width: 10px;
			  			  /* 边框样式属性：实线 点线 双实线 虚线 */
			  			  border-style: double;
			  			  /* 边框方向样式属性： */
			  			  border-top-style: dashed;
			  			  border-bottom-style:dotted;
			  			  /* 边框颜色属性：十六进制色值 */
			  			  border-color: #0000ff;
			  			   /* 边框方向颜色属性：十六进制/rgba(255, 255, 0,.8) */
			  			   border-top-color: #00ff00;
			  			   border-bottom-color:rgba(255, 255, 0,.6) ;
			  			   
			  			   /* 复杂边框：边框倒角(没有边框不能倒角) border-radius 属性 */
			  			   /* 边框倒角(没有边框不能倒角) border-radius 属性：1个属性值：顺时针 从左上角开始 */
			  			   border-radius:5px ;
			  			    /* 边框倒角(没有边框不能倒角) border-radius 属性：2个属性值：顺时针：左上+右下 右上+左下 */
			  			   border-radius:100px 5px ;
			  			   /* 边框倒角(没有边框不能倒角) border-radius 属性：3个属性值：顺时针：左上 右上+左下 右下 */
			  			   border-radius: 0px 10px 100px;
			  			   /* 边框倒角(没有边框不能倒角) border-radius 属性：4个属性值：顺时针：左上 右上 右下 左下 */
			  			   border-radius: 0px 10px 100px 200px;
			  			   
			  			   /* 练习：1 圆形 2.正三角形
			  				思路1：宽高与边框倒角一致
			  				思路2：div#d1  css中：抓到div   【斜线】
			  				                            左边框：50像素实线红色
			  				                             右边框：50像素实线黄色
			  											 下边框：50像素实线黑色
			  					注意：先别加宽高  transparent 透明色						 
			  				*/
			  		  }
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>